/*
 * @Author: jiu yin
 * @Date: 2024-05-07 15:16:59
 * @LastEditTime: 2024-06-06 14:50:20
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \studio-web-admin\src\view\scene_studio\component\add_edit.tsx
 * jiu
 */
import { create_studio_program, edit_studio_program, studio_scene_list, top_infobox } from "@/api/home";
import Modal_edit from "@/comment/modal_edit";
import { useRoute } from "@/hooks";
import { DashboardOutlined, UserOutlined } from "@ant-design/icons";
import { Image, InputNumber, message } from "antd";
import { useEffect, useState } from "react";
import "./index.scss";
export default function add_edit(props: any) {
	let { type, isModalOpen, edit_data = {} } = props;
	const { push } = useRoute();
	console.log(edit_data);

	//上方信息
	let [top_info, setTop_info] = useState<any>({});
	useEffect(() => {
		top_infobox().then((res: any) => {
			setTop_info(res.data);
		});
	}, []);

	//场景列表
	let [scene_list, set_scene_list] = useState<any>([]);

	useEffect(() => {
		studio_scene_list({ page: 1, limit: 100 }).then((res: any) => {
			set_scene_list(res.data.data);
			if (type == "add" && res.data.data.length) {
				set_scene_item(res.data.data[0]);
			} else if (type == "edit") {
				let item = res.data.data.find((item: any) => item.scene_id == edit_data.scene_id);
				set_scene_item(item);
			}
		});
	}, []);

	let dataInfo =
		type == "add"
			? {
					scene_id: 1,
					tourist_num: 1,
			  }
			: edit_data;
	let [data, set_data] = useState(dataInfo);
	let [scene_item, set_scene_item] = useState({
		scene_name: "",
		cover_url: "",
		exp_duration: "",
		max_num: "",
		scene_file_name: "",
		scene_id: "",
		desc: "",
	});
	const scene_fn = (item: any) => {
		set_data({ ...data, scene_id: item.scene_id });
		set_scene_item(item);
	};

	//取消
	const handleCancel = () => {
		set_data({ ...data, scene_id: 1, tourist_num: 1 });
	};
	const onChange = (value: number | null) => {
		set_data({ ...data, tourist_num: value as number });
	};
	const handleOk = async () => {
		if (!data.tourist_num) return message.error("请输方案成员数");
		// if (data.tourist_num > top_info.idle_devices)
		// 	return message.warning("方案成员数大于剩余可用设备，请等待设备空闲或减少成员数");
		let fn = type == "add" ? create_studio_program : edit_studio_program;
		let result = await fn(data);
		message.success(type == "add" ? "添加成功" : "编辑成功");
		setTimeout(() => {
			push("/scene_studio/scene_member_code?program_id=" + result.data.program_id);
		}, 300);
	};
	return (
		<div>
			<Modal_edit
				title={type == "add" ? "创建场景方案" : "编辑场景方案"}
				okText="下一步"
				isModalOpen={isModalOpen}
				width={scene_list.length > 1 ? 760 : 546}
				handleOk={handleOk}
				handleCancel={handleCancel}>
				<div>
					<section>
						<h3 className="c-#161940 font-700">1.选择场景</h3>
						<div className=" flex h-422px mt-10px">
							<div className="w-504px bg-#F7F8FF border-rd-10px overflow-hidden">
								<img src={scene_item.cover_url} alt="" className="h-300px w-100%" />
								<div className="p-16px">
									<h3 className="c-#161940 font-700">{scene_item?.scene_name}</h3>
									<p className="c-#5C5F7A text-14px">{scene_item?.desc}</p>
									<ul className="flex text-14px mt-16px">
										<li className="flex mr-28px">
											<UserOutlined style={{ fontSize: "16px", color: "#9697A9" }} />
											<span className="c-#9697A9 ml-5px">最大成员</span>
											<span className="c-#161940 ml-5px">{scene_item?.max_num}人</span>
										</li>
										<li className="flex mr-28px">
											<DashboardOutlined style={{ fontSize: "16px", color: "#9697A9" }} />
											<span className="c-#9697A9 ml-5px">体验时长</span>
											<span className="c-#161940 ml-5px">{scene_item?.exp_duration}min</span>
										</li>
									</ul>
								</div>
							</div>
							{scene_list.length > 1 && (
								<div className="h-100% ml-16px overflow-y-auto w-150px">
									<ul>
										{scene_list.map((item: any, index: number) => (
											<li
												className="mb-16px relative cursor-pointer overflow-hidden "
												key={index}
												onClick={() => scene_fn(item)}>
												<img
													src={item.cover_url}
													alt=""
													className={`w-120px h-80px vertical-bottom  border-rd-10px border_w ${
														scene_item.scene_id == item.scene_id && "border_active"
													}`}
												/>
												<div className="h-27px bg_name text-center  line-height-27px absolute bottom-4px left-4px w-120px c-#fff overflow border-rd-10px">
													{item.scene_name}
												</div>
											</li>
										))}
									</ul>
								</div>
							)}
						</div>
					</section>

					<section className="mt-28px mb-55px">
						<div>
							<h3 className="c-#161940 font-700">2.设置方案成员数 </h3>
							<div className="flex  items-center mt-12px">
								<InputNumber
									precision={0}
									onChange={onChange}
									value={data.tourist_num}
									controls={false}
									style={{ width: "80px" }}
								/>
								<p className="c-#5C5F7A text-14px ml-20px">当前剩余可用设备 ：{top_info.idle_devices}</p>
							</div>
						</div>
					</section>
				</div>
			</Modal_edit>
		</div>
	);
}
